import { useEffect, useState } from "react";
import "./index.scss";
import { Popover } from "antd";
import {
  ArrowUpOutlined,
  QuestionOutlined,
  SmileOutlined,
  QuestionCircleOutlined,
  MailOutlined,
  BookOutlined,
  ReadOutlined,
  FileUnknownOutlined,
} from "@ant-design/icons";
interface IndexProps {
  refs: React.RefObject<HTMLDivElement>;
}

const Index: React.FC<IndexProps> = ({ refs }) => {
  const names = [
    "人工客服",
    "帮助中心",
    "建议意见",
    "新手引导",
    "更新日志",
    "提模版需求",
  ];
  const icons = [
    <SmileOutlined />,
    <QuestionCircleOutlined />,
    <MailOutlined />,
    <BookOutlined />,
    <ReadOutlined />,
    <FileUnknownOutlined />,
  ];
  const [isVisible, setIsVisible] = useState("none");

  const onClickTop = () => {
    if (refs.current) {
      refs.current.scrollTo({ top: 0, behavior: "smooth" });
    }
  };
  useEffect(() => {
    if (refs.current) {
      const scrollableElement = refs.current;

      const handleScroll = () => {
        if (scrollableElement.scrollTop > 100) {
          setIsVisible("block");
        } else {
          setIsVisible("none");
        }
      };

      scrollableElement.addEventListener("scroll", handleScroll);
      return () =>
        scrollableElement.removeEventListener("scroll", handleScroll);
    }
  }, [refs]);
  //   const [pops, setPops] = useState("none");
  const [hoverIndex, setHoverIndex] = useState(-1);
  const handlepopEnter = (index: number) => {
    setHoverIndex(index);
  };
  const handlepopLeave = () => {
    setHoverIndex(-1);
  };
  const clickPop = (index: number) => {
    console.log(index);

    if (index == 0) {
      window.location.href = "/rengong";
    }
  };
  const content = (
    <div className="pop">
      {names.map((item, index) => {
        const isHovered = hoverIndex === index;
        return (
          <div
            key={index}
            className="topUp_list"
            onMouseEnter={() => handlepopEnter(index)}
            onMouseLeave={handlepopLeave}
            onClick={() => clickPop(index)}
            style={{
              background: isHovered ? "#F1F2F4" : "#fff", // 鼠标悬停时的背景颜色
            }}
          >
            <div className="icons">{icons[index]}</div>
            <div className="poptext">{item}</div>
          </div>
        );
      })}
    </div>
  );
  return (
    <div>
      <div
        style={{ display: isVisible }}
        className="scrollTop"
        onClick={onClickTop}
      >
        <ArrowUpOutlined style={{ fontSize: "24px" }} />
      </div>
      <Popover content={content}>
        <div className="question">
          <QuestionOutlined style={{ fontSize: "24px" }} />
        </div>
      </Popover>
    </div>
  );
};

export default Index;
